import React from 'react'
import classNames from 'classnames'
import { withNativeProps } from '../../utils/native-props'
import type {
  SkeletonProps,
  SkeletonTitleProps,
  SkeletonParagraphProps,
} from './type'

const classPrefix = 'rt-skeleton'

const generateIntArray = (from: number, to: number) => {
  const array: number[] = []
  for (let i = from; i <= to; i++) {
    array.push(i)
  }
  return array
}

export const Skeleton: React.FC<SkeletonProps> = (props) => {
  const { animated } = props
  return withNativeProps(
    props,
    <div
      className={classNames(classPrefix, {
        [`${classPrefix}-animated`]: animated,
      })}
    />,
  )
}

export const SkeletonTitle: React.FC<SkeletonTitleProps> = (props) => {
  const { animated } = props
  return withNativeProps(
    props,
    <Skeleton animated={animated} className={`${classPrefix}-title`} />,
  )
}

export const SkeletonParagraph: React.FC<SkeletonParagraphProps> = (props) => {
  const {
    animated,
    lineCount = 3,
  } = props
  const keys = generateIntArray(1, lineCount)
  const node = (
    <div className={`${classPrefix}-paragraph`}>
      {keys.map((key: number) => (
        <Skeleton
          key={key}
          animated={animated}
          className={`${classPrefix}-paragraph-line`}
        />
      ))}
    </div>
  )
  return withNativeProps(props, node)
}
